<template>
    <div class="product">
        <!--        容器-->
        <div class="container-fluid">
            <!--            行-->
            <div class="row">
                <!--                左边-->
                <div class="col-md-3">
                    <!--                    一下一些按钮通过数据过滤得到-->
                    <button class="btn btn-block btn-default" :class="{'btn-primary':mag==all}" @click="handelPro(all)">
                        {{all}}
                    </button>
                    <button class="btn btn-block btn-default" :class="{'btn-primary':mag==v}" v-for="(v,i) in cateArr"
                            :key="i" @click="handelPro(v)">
                        {{v}}
                    </button>
                </div>
                <!--                右边商品列表-->
                <div class="col-md-9">
                    <!--                    一下商品信息需要网络请求循环展示-->
                    <div v-for="(v,i) in classpage" :key="i" class="canter">
                        <h3>{{v.proName}} <span class="pull-right label label-primary">{{v.proPrice}}</span></h3>
                        <p class="lead">{{v.proInfo}}
                            <button class="btn btn-success pull-right" @click="addCart(v)">加入购物车</button>
                        </p>
                        <!--                        清除浮动-->
                        <div class="clearfix"></div>
                    </div>
                    <!--                    设置按钮组-->
                    <div class="pull-right">
                        <button class="btn btn-default" v-for="num in btnCount" :class="{'btn-success':num==pageIndex}" @click="choosePage(num)">{{num}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Produck",
        data: () => {
            return {
                mag: '全部',
                cateArr: ["上衣", "鞋子", "外套"],//分类category  存储左侧按钮具体数据
                all: "全部",
                productArr: [],
                // 按钮个数
                btnCount: 0,
                //分页
                pageIndex: 1,
            //  分页展示的内容
            classpage:[]
            }
        },
        created() {
            //    网络请求
            this.axios.get("/api/allProduct").then(data => {
                this.productArr = data.data;
                for (let i in data.data) {
                    let cate = data.data[i].category
                    this.cateArr.push(cate);
                    this.handelPageProduct(1)
                }
                this.cateArr = Array.from(new Set(this.cateArr));
                this.handelBtnCount();
                console.log(this.cateArr);
            }).catch(err => {
            })
        },
        methods: {
            handelPro(a) {
                //    点击分类
                this.mag = a;
                if (a == this.all) {
                    this.axios.get("/api/allProduct").then(data => {
                        this.productArr = data.data;
                        this.handelBtnCount();
                    }).catch(err => {
                    })
                } else {
                    this.axios.get("/api/classify", {params: {cate: a}}).then(data => {
                        this.productArr = data.data;
                        this.handelBtnCount();
                    }).catch(err => {
                    });
                }
                ;
                //调用处理按钮数量的方法

            },
            //    处理按钮数量的方法
            handelBtnCount() {
                this.btnCount = Math.ceil(this.productArr.length / 3);
                this.pageIndex = 1;
                this.handelPageProduct(1)
            },
            //分页按钮的点击事件
            choosePage(a) {
                this.pageIndex = a;
               this.handelPageProduct(a)
            },
        //    分页
            handelPageProduct(n){
                this.classpage=this.productArr.slice((n-1)*3,n*3);
            },
        //    添加购物车事件
            addCart(proobj){
                //调用父级方法
                this.$parent.addProFromProduck(proobj);
            //    ===============后台查询=======================
                console.log(proobj);
                this.axios.get('/api/add',{params:{id:proobj._id,proName:proobj.proName,proPrice:proobj.proPrice}}).then(data=>{
console.log(data.data)
                }).catch(()=>{})

            }

        }
    }
</script>
<style scoped>
    .canter {
        background-color: darkgray;
        padding: 10px;
        /*padding-bottom: 20px;*/
        margin-bottom: 20px;
        border-radius: 10px;
    }
</style>